<template>
  <!-- 弹窗中的 告警记录 -->
  <div class="alarm-record">
    <div class="selectBar">
      <div class="pickTime">
        <date-range-picker
          @passDate="passAlarmDate"
          :clearbtn="true"
        />
      </div>
      <div v-if="false" class="export-btn" @click="alarmExport">
        导出
      </div>
    </div>
    <div class="table_data">
      <el-scrollbar style="height:100%">
      <el-table :data="tableData" stripe style="width: 100%" row-key="alarm_id">
        <el-table-column prop="attime" label="告警开始时间" width="180">
          <template slot-scope="{row}">
            <div :class="{'error': getStatus(row.status).key === 0}">
              {{format(row.attime*1000, 'YYYY-MM-DD HH:mm:ss')}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="except_level" label="等级" width="100">
          <template slot-scope="{row}">
            <div :class="{'error': getStatus(row.status).key === 0}">
              {{except_levels.find(item => item.key === row.except_level).txt}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="except_reason" label="告警原因" show-overflow-tooltip>
          <template slot-scope="{row}">
            <div :class="{'error': getStatus(row.status).key === 0}">
              {{row.except_reason}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="处理状态" width="80" align="center">
          <template slot-scope="{row}">
            <div :class="getStatus(row.status).className">
              {{getStatus(row.status).value}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="80" align="center">
          <template slot-scope="{row}">
            <div v-if="getStatus(row.status).key === 0" class="error pointer" @click="openDeal(row, '处理告警')">
              处理告警
            </div>
            <div v-else class="primary pointer" @click="openDeal(row, '查看详情')">
              查看详情
            </div>
          </template>
        </el-table-column>
      </el-table>
      </el-scrollbar>
    </div>
    <pagina-tion
      v-show="total>=0"
      :background="true"
      :total="total"
      :offset.sync="offset"
      :limit.sync="limit"
      @pagination="getChangePage"
    />

    <deal-dialog v-if="dealVisable" :title="dealTitle" :dealObj="dealObj" @close="closeDeal"/>

  </div>
</template>

<script>
import { mapState } from 'vuex'
import {
  format
} from 'silly-datetime'
import * as api from '@/api'
import { project_id } from '@/consts/consts'
import { dealStatusMap, except_levels } from '@/consts/codeMaps'
import { getLocaltodyString } from '@/utils/timeUtil.js'
import { downLoadFile } from '@/utils/tool.js'
const dateStart = getLocaltodyString()
export default {
  data() {
    return {
      format,
      branch_number: this.$route.query.branch_number,
      dateRange: [

      ],
      branchList: [],
      deviceList: [],
      total: 0,
      offset: 0,
      limit: 5,
      dealStatusMap,
      except_levels,
      tableData: [],
      alarm: {},
      dialog: {
        visible: false,
        info: {
          alarm: null
        }
      },
      dealVisable: false,
      dealTitle: '',
      dealObj: {}
    }
  },
  computed: {
    ...mapState(['deviceDetail'])
  },
  methods: {

    passAlarmDate (args) {
      this.dateRange = args
      this.alarmList()
    },

    getStatus(status) {
      return dealStatusMap.find(item => item.key === status)
    },

    getChangePage(val) {
      this.offset = val.offset
      this.alarmList()
    },


    openHandleAlarmDialog (alarm) {
      this.alarm = alarm
      this.dialog.alarm = alarm
      this.dialog.visible = true
    },

    openDeal(row, title) {
      console.log(row)
      this.dealTitle = title
      this.dealObj = row
      this.dealVisable = true
    },

    closeDeal() {
      this.dealVisable = false
      this.alarmList()
    },
    
    getParamsData() {
      const dateRange = this.dateRange === null ? [] : this.dateRange
      const [start = '', end = ''] = dateRange
      let data = {
        project_id,
        serial: this.deviceDetail.serial
      }
      if (this.branch_number) {
        data.branch_number = this.branch_number
      }
      if (this.deviceDetail.device_type) {
        data.device_type = [this.deviceDetail.device_type]
      }
      if (start) {
        data.time_start = format(start, 'YYYY-MM-DD')
      }
      if (end) {
        data.time_end = format(end, 'YYYY-MM-DD')
      }
      return data
    },

    async alarmExport() {
      const [start, end] = this.dateRange
      const res = await api.alarmmanage.alarmExport({
        branch_number: this.$route.query.branch_number,
        time_start: format(start, 'YYYY-MM-DD'),
        time_end: format(end, 'YYYY-MM-DD')
      })
      downLoadFile(res, '告警数据.xlsx')
    },

    async alarmList() {
      const paramsData = this.getParamsData()

      const { code, data, total } = await api.alarmmanage.alarmList({
        offset: this.offset,
        limit: 5
      }, paramsData)
      if (code === 0) {
        this.tableData = data
        this.total = total
      }
    },
  },
  created() {
    this.alarmList()
  },
}
</script>

<style lang="stylus">
.alarm-record {
  .selectBar {
    height: 40px;
    flexMiddle(space-between);
    .pickTime {
      width: 260px;
    }
  }
  .table_data {
    margin-top: getPx(15);
    height:getPx(300);
  }
}

</style>